<template>
  <div id="cesiumContainer"></div>
</template>
 
<script setup>
import * as Cesium from "cesium";
import { onMounted } from "vue";
onMounted(() => {

  // 引入服务器提供的图像
  var custom = new Cesium.ArcGisMapServerImageryProvider({
    url: "//services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer",
  });

  //自定义的配置内容
  var viewer = new Cesium.Viewer('cesiumContainer', {
    //配置是否创建baseLayerPicker小部件
    // baseLayerPicker:false,
    //配置图像的提供
    imageryProvider: custom,
    //配置Cesium的世界地形
    terrainProvider: Cesium.createWorldTerrain({
      //配置地形的3D效果
      requestWaterMask: true,
      requestVertexNormals: true
    })
  });


  //利用三维坐标来设置摄像头位置
  viewer.camera.setView({
    //设置摄像头初始的具体位置()
    destination: new Cesium.Cartesian3(1332761, -4662399, 4137888),
    //方向、视角角度的配置(可以直接用0-1进行设置)
    orientation: {
      heading: 0.60,
      pitch: -0.66
    }
  })

  //引入Cesium官方自带的模型（引入自定义的模型需要注意格式）
  var city = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({
    url: Cesium.IonResource.fromAssetId(3839)
  }))

  //定义3d样式（通过高度不同来设置不同的颜色）
  var heightStyle = new Cesium.Cesium3DTileStyle({
    color: {
      //条件判断（[条件,配置]）
      conditions: [
        ['${height} >= 300', 'rgba(255,0,0,0.5)'],
        ['${height} >= 200', 'rgb(255,165,0)'],
        ['${height} >= 100', 'rgb(255,255,0)'],
        ['${height} >= 50', 'rgb(0,255,0)'],
        ['${height} >= 25', 'rgb(0,127,255)'],
        ['${height} >= 10', 'rgb(0,0,255)'],
        ['${height} >= 5', 'rgb(139,0,255)'],
        //true表示只要这个模型有,就改变它的颜色
        ['true', 'rgb(127,59,8)'],
      ]
    }
  })

  //将定义好的样式赋值给引入的模型
  city.style = heightStyle;
});
</script>
 
<style>
#cesiumContainer {
  width: 1000px;
  height: 100%;
  padding: 0;
  margin: 0;
  overflow: hidden;
}
</style>